<template>
    <div>
        <top-bar :to="back_to" :style="color"></top-bar>
        <div v-if="music.src!=null" style=" position: fixed;top: 10vh;z-index: 99;width: 100%;">
            <player
                    style="border-radius: 8px;"
                    ref="MusicController"
                    :music="music">
            </player>
        </div>
        <div class="my-container" style="position: absolute;top: 22vh;width: 100%">
            <div class="play-body-block">
                <mu-button v-on:click="backEnd" style="width: 100%">浮动播放</mu-button>
                <div class="my-paper"
                     v-html='music.work_content'>
                </div>
            </div>

            <love-panel
                    position="bottom"
                    random_color="true"
                    mid_icon_size="8vh"
                    @loveYou="loveYou"
                    :mid_text="music.thumb"
                    :right_text="music.ranks"
                    :left_text="music.view">
            </love-panel>
            <random-fly-msg v-if="fly_msg" msg="true"></random-fly-msg>
        </div>

        <mu-dialog title="操作提示" width="360" :open.sync="showInfo">
            {{tips}}
            <mu-button slot="actions" flat color="primary" @click="closeDialog">我知道了</mu-button>
        </mu-dialog>
    </div>
</template>

<script>
    import TopBar from '@/components/TopBar'
    import player from 'vue-aplayer'
    import LovePanel from "@/components/LovePanel"
    import RandomFlyMsg from '@/components/RandomFlyMsg'

    player.disableVersionBadge = true

    export default {
        name: "VoiceDetail",
        components: {
            TopBar,
            player,
            LovePanel,
            RandomFlyMsg
        },
        data() {
            return {
                fly_msg: false,
                color: "color:white;background-color:" + this.$store.state.uiState.music.theme,
                music: this.$store.state.uiState.music,
                style: "color:black",
                showInfo: false,
                tips: ''
            }
        },
        created() {
            console.log(this.music)
            if (this.music == null
                || this.music.hasOwnProperty('src') !== true
                || (this.music.hasOwnProperty('src') === true && this.music.src === null)) {
                this.$router.push('/declaimer/home')
            }
            this.$store.commit('updateBackend', false)
            this.$store.dispatch('actionAddVisitor', {wId: this.music.id}).then((res) => {
                console.log(res.data)
            })
        },
        mounted() {
            if (this.music != null && this.music.src != null) {
                this.music.work_content = this.music.work_content.replace('\n', '<br/>')
                if (this.$refs.MusicController !== undefined && this.$refs.MusicController.audio !== undefined) {
                    this.$refs.MusicController.audio.play()
                    this.$refs.MusicController.audio.addEventListener("timeupdate", () => {
                        try {
                            this.$store.commit('updateMusicCurrentTime', this.$refs.MusicController.audio.currentTime)
                        } catch (e) {
                            //console.log(e)
                        }
                    })
                }
            }
            setInterval(() => {
                this.style = this.style = "color:" + this.randomColor()
            }, 520)
        },
        computed: {
            back_to() {
                return this.$store.state.uiState.back_to
            }
        },
        methods: {
            closeDialog() {
                this.showInfo = false
                this.$store.commit('updateBackend', true)
                this.$store.commit('updateBackendMusic', this.music)
                this.$store.commit('updateBackendPlay', true)
                this.$router.push(this.back_to)
            },
            loveYou() {
                this.$store.dispatch('giveThumbs', {wId: this.music.id}).then(
                    (res) => {
                        if (res.data.code === 0) {
                            this.fly_msg = true
                            this.music.thumb += 1
                            this.$store.commit('selectVoice', this.music)
                            setTimeout(() => {
                                this.fly_msg = false
                            }, 500)
                        } else {
                            this.$toast.info({position: 'top', message: res.data.msg})
                        }
                    }
                )
            },
            randomColor() {
                let r = Math.floor(Math.random() * 220)
                let g = Math.floor(Math.random() * 220)
                let b = Math.floor(Math.random() * 220)
                return 'rgba(' + r.toString() + ',' + g.toString() + ',' + b.toString() + ',1)'
            },
            backEnd() {
                let loc = localStorage.getItem('declaimer_first_float')
                if (loc == null) {
                    this.showInfo = true
                    this.tips = "漂浮状态播放的时候，长按播放小窗体就可以取消漂浮播放"
                    localStorage.setItem('declaimer_first_float', 'true')
                } else {
                    this.$store.commit('updateBackend', true)
                    this.$store.commit('updateBackendMusic', this.music)
                    this.$store.commit('updateBackendPlay', true)
                    this.$router.push(this.back_to)
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .my-paper
        position: relative
        padding 2px
        font-size 18px
        line-height 36px
        color rgba(119, 113, 113, 0.87);

    .play-body-block
        padding 8px

</style>